import type { FC } from 'react';
import { View, ScrollView, Text } from 'react-native';
import { Space, PageWrapper } from '@/components';
import { useDetails } from '@/components/PostItem/hooks';
import Images from './components/Images';
import { formatDate } from '@/utils/helper'
import UserFollow from './components/UserFollow';
import { WINDOW_WIDTH } from '@/utils/resize';
import MoreButton from './components/MoreButton';
import ListItems from './components/ListItems';
import Location from './components/Location';
import ActionBar from './components/ActionBar';
import Participants from './components/Participants';
import styles from './styles';

const DeatilContent: FC = () => {
  const {
    creator,
    title,
    desc,
    medias = [],
    startTime,
    endTime,
    location,
    latitude,
    longitude
  } = useDetails();

  const items = [
    {
      key: 'start',
      label: 'Start time',
      content: formatDate(startTime, false)
    },
    {
      key: 'end',
      label: 'End time',
      content: formatDate(endTime, false)
    },
    {
      key: 'limit',
      label: 'Limit',
      content: '20 people'
    }
  ];

  return (
    <PageWrapper
      hasSafeTop
      mode="black"
      extra={<MoreButton />}
      headerContent={<UserFollow user={creator} />}
    >
      <View style={styles.wrapper}>
        <ScrollView
          style={styles.scroller}
          showsVerticalScrollIndicator={false}
        >
          <Images
            height={WINDOW_WIDTH / 1.5}
            urls={medias.map(e => e.src)}
          />
          <View style={styles.content}>
            <Space direction="vertical">
              <Text style={styles.title}>{title}</Text>
              <ListItems items={items} />
              <Location
                location={location}
                latitude={latitude}
                longitude={longitude}
              />
              <Text style={styles.desc}>{desc}</Text>
              <Participants />
            </Space>
          </View>
        </ScrollView>
        <ActionBar />
      </View>
    </PageWrapper>
  );
}

export default DeatilContent;